<template>
  <layout>
    <template #header>
      <view class="head flex flex-a-c">
        <image
          src="../../../assets/images/icons/arrow-right.png"
          class="arrow-left back"
          style="width: 48rpx; height: 48rpx; opacity: 0.9"
          mode="scaleToFill"
          @click="back"
        />
        <text class="fs-36 bold">任务详情</text>
      </view>
    </template>
    <view class="content">
      <view class="info flex">
        <image class="poster" :src="info.verticpic" />
        <view class="right">
          <text class="title ellipsis-2 fs-32 bold">
            {{ info.vname }}
          </text>
          <view class="eso c-60 fs-28">
            已完结/共{{ info.episodeCount }}集
          </view>
          <view class="eso c-60 fs-28"> {{ info.onlineTime }}上线 </view>
          <view class="income flex flex-a">
            <text class="fs-24 c-60 flex">历史收益</text>
            <text class="value fs-28 bold">{{
              info.totalMaxIncome ? info.totalMaxIncome + "元" : 0
            }}</text>
          </view>
          <view class="btns flex">
            <view class="btn flex flex-a-c">
              <image
                src="../../../assets/images/icons/send.png"
                style="width: 32rpx; height: 32rpx; margin-right: 8rpx"
                mode="scaleToFill"
              />
              <text class="fs-20">{{ info.promotionCount || 0 }}</text>
            </view>
            <view class="btn flex flex-a-c">
              <image
                v-if="info.isCollect"
                src="../../../assets/images/icons/star-active.png"
                style="width: 32rpx; height: 32rpx; margin-right: 8rpx"
                mode="scaleToFill"
              />
              <image
                v-else
                src="../../../assets/images/icons/star.png"
                style="width: 32rpx; height: 32rpx; margin-right: 8rpx"
                mode="scaleToFill"
              />
              <text class="fs-20">{{ info.collectCount || 0 }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="types">
        <view v-if="platforms.length" class="selection flex">
          <view
            v-for="(item, index) in platforms"
            :key="index"
            @click="selectType(item.id)"
            :class="{ active: typeIndex === item.id }"
            class="type flex flex-a-c"
          >
            <image
              :src="require(`../../../assets/images/icons/${item.icon}.png`)"
            ></image>
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view v-show="typeIndex == 0">
          <view class="desc">
            <view class="title fs-32 bold">小程序计划</view>
            <view class="flex desc-t">
              <view class="item flex flex-a-c">
                <text>推广计划</text>
                <text class="num">{{ rateInfo.dyMaPromotionRate || 0 }}%</text>
              </view>
              <view class="item flex flex-a-c">
                <text>平台</text>
                <text class="num">{{ rateInfo.dyMaPromotionPlat || 0 }}%</text>
              </view>
            </view>
          </view>
          <view class="desc">
            <view class="title fs-32 bold">星图结算</view>
            <view class="flex desc-t">
              <view class="item flex flex-a-c">
                <text>分成比例</text>
                <text class="num">{{ rateInfo.xtMount }}%</text>
              </view>
            </view>
          </view>
        </view>
        <view v-show="typeIndex == 1">
          <view class="desc">
            <view class="title fs-32 bold">充值</view>
            <view class="flex desc-t">
              <view class="item flex flex-a-c">
                <text>分成比例</text>
                <text class="num">{{ rateInfo.ksMount || 0 }}%</text>
              </view>
            </view>
          </view>
          <view class="desc">
            <view class="title fs-32 bold">星图结算</view>
            <view class="flex desc-t">
              <view class="item flex flex-a-c">
                <text>分成比例</text>
                <text class="num">{{ rateInfo.xtMount }}%</text>
              </view>
            </view>
          </view>
        </view>
        <view v-show="typeIndex == 2">
          <view class="desc">
            <view class="title fs-32 bold">充值</view>
            <view class="flex desc-t">
              <view class="item flex flex-a-c">
                <text>分成比例</text>
                <text class="num">{{ rateInfo.wxChannel || 0 }}%</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="intro">
        <view class="fs-32 bold">剧情简介</view>
        <text class="fs-28 color-80">{{ info.intro }}</text>
      </view>
      <view class="link" v-if="info.netDiskUrl">
        <view class="fs-32 bold">网盘链接</view>
        <view class="btns flex">
          <a
            class="btn"
            :href="info.netDiskUrl + '?pwd=' + info.netDiskPassword"
            >直接打开</a
          >
          <view
            class="btn"
            @click="copyCode(info.netDiskUrl + '?pwd=' + info.netDiskPassword)"
            >复制链接</view
          >
        </view>
      </view>
    </view>
    <view class="func flex flex-bt">
      <view @click="toPlay" class="flex flex-a-c">
        <image
          src="../../../assets/images/icons/play.png"
          style="width: 48rpx; height: 48rpx; margin-right: 16rpx"
        />
        <text>播放</text>
      </view>
      <view @click="onCollect" class="flex flex-a-c">
        <image
          v-if="info.isCollect"
          src="../../../assets/images/icons/star-active.png"
          style="width: 48rpx; height: 48rpx; margin-right: 16rpx"
        />
        <image
          v-else
          src="../../../assets/images/icons/star.png"
          style="width: 48rpx; height: 48rpx; margin-right: 16rpx"
        />
        <text>{{ info.isCollect ? "取消收藏" : "收藏" }}</text>
      </view>
      <view
        v-if="platforms.length"
        @click="checkAuth"
        class="btn flex flex-a-c"
      >
        <image
          src="../../../assets/images/icons/send-white.png"
          style="width: 48rpx; height: 48rpx; margin-right: 16rpx"
        />
        <text>去投稿</text>
      </view>
    </view>
    <u-popup
      round="32rpx"
      class="f-container"
      :show="showPopup"
      @close="showPopup = false"
    >
      <view class="f-content">
        <view class="title flex">
          <text>投稿</text>
          <image
            src="../../../assets/images/icons/close.png"
            class="close"
            @click="showPopup = false"
          />
        </view>
        <view class="platform">
          <view class="title flex flex-a">
            <text>投稿平台</text>
            <!-- TODO: 等挂载教程 -->
            <view v-if="false" class="tip flex flex-a">
              <image
                src="../../../assets/images/icons/play-1.png"
                mode="scaleToFill"
              />
              <text>查看挂载教程</text>
            </view>
          </view>
          <view class="ps flex flex-bt">
            <view
              @click="selectType(item.id)"
              :class="{ active: typeIndex === item.id }"
              class="ps-item"
              v-for="(item, index) in platforms"
              :key="index"
            >
              <image
                :src="require(`../../../assets/images/icons/${item.icon}.png`)"
                mode="scaleToFill"
              />
              <image
                src="../../../assets/images/icons/check-w.png"
                class="check"
                v-if="typeIndex == item.id"
              />
              <text>{{ item.name }}</text>
            </view>
          </view>
        </view>
        <view class="task-info">
          <view v-show="typeIndex == 0">
            <!-- <text
              :class="{ active: mountType == 20 }"
              @click="mountType = 20"
              class="type"
              >拍摄挂载</text
            > -->
            <text
              :class="{ active: mountType == 21 }"
              @click="mountType = 21"
              class="type"
              v-if="info.dyXtTaskUrl"
              >星图挂载</text
            >
            <view class="rq">
              <text>挂载要求：</text>
              <text>粉丝≥1000人</text>
            </view>
          </view>
          <view v-show="typeIndex == 1">
            <text
              :class="{ active: mountType == 22 }"
              @click="mountType = 22"
              class="type"
              v-if="info.ksPromotionUrl"
            >
              拍摄挂载
            </text>
            <text
              :class="{ active: mountType == 23 }"
              @click="mountType = 23"
              class="type"
              v-if="info.ksJxQrcodeUrl"
            >
              聚星挂载
            </text>
            <view class="rq">
              <text style="color: #f65900" class="c-60">挂载要求：</text>
              <text class="fans">粉丝≥{{ mountType == 22 ? 0 : 10000 }}人</text>
            </view>
          </view>
          <view class="task-name" v-if="!showQrcode">
            <text>任务名称</text>
            <input
              v-model="taskName"
              class="input"
              type="text"
              placeholder="请输入任务名称"
            />
          </view>
          <template v-if="showQrcode">
            <!-- 星图 -->
            <uv-qrcode
              ref="qs-qrcode"
              :value="info.dyXtTaskUrl"
              :options="ksOptions"
              class="qrcode ks-qrcode"
              size="320rpx"
              v-if="mountType == 21"
            ></uv-qrcode>
            <!-- 聚星 -->
            <uv-qrcode
              ref="qs-qrcode1"
              :value="info.ksJxQrcodeUrl"
              :options="ksOptions"
              class="qrcode ks-qrcode"
              size="320rpx"
              v-if="mountType == 23"
            ></uv-qrcode>
            <view
              @click="
                onSaveQrcode(mountType == 21 ? 'qs-qrcode' : 'qs-qrcode1')
              "
              class="flex-a-c ks-save"
            >
              保存至本地
            </view>
          </template>
          <view v-if="typeIndex == 2">
            <view class="flex flex-a-c">
              <view class="wx-box flex flex-a-c">
                <uv-qrcode
                  ref="qrcode"
                  :value="wxPoster"
                  :options="options"
                  class="qrcode"
                  size="320rpx"
                  v-if="wxPoster"
                ></uv-qrcode>
                <image
                  v-else
                  src="../../../assets/images/icons/qrcode.png"
                  mode="scaleToFill"
                  class="qrcode"
                />
              </view>
            </view>
            <view
              class="create"
              @click="onSaveQrcode('qrcode')"
              v-if="wxPoster"
            >
              <image
                src="../../../assets/images/icons/pic.png"
                mode="scaleToFill"
              />
              <text>保存到本地</text>
            </view>
            <view v-else @click="createQrcode" class="create">
              <image
                src="../../../assets/images/icons/pic.png"
                mode="scaleToFill"
              />
              <text>生成海报</text>
            </view>
          </view>
        </view>
        <view class="btns" v-show="typeIndex != 2 && !showQrcode">
          <view class="btn active-btn" @click="createTask">立即创建</view>
        </view>
      </view>
    </u-popup>

    <!-- 实名提示 -->
    <u-modal
      :show="showModal"
      closeOnClickOverlay
      showCancelButton
      confirmText="去认证"
      @cancel="showModal = false"
      @close="showModal = false"
      @confirm="toAuth"
      title="尚未完成实名认证，立即去认证?"
    ></u-modal>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import { copyText, randomString } from "../../../assets/utils/index";
import { getRate } from "../../../api/extend/index";
import { createTask } from "../../../api/drama";
import { getAuth } from "../../../api/auth";
import {
  getDramaDetail,
  collect,
  unCollect,
  viewDrama,
} from "../../../api/drama";

export default {
  components: { layout },
  data() {
    return {
      showModal: false,
      showPopup: false,
      typeIndex: 0,
      taskName: "",
      wxPoster: "",
      id: "",
      info: {},
      rateInfo: {},
      mountType: 20,
      options: {
        backgroundImageSrc: "",
        margin: 20,
        backgroundColor: "#ffffff",
        backgroundImageAlpha: 0.5,
      },
      ksOptions: {
        margin: 20,
        backgroundColor: "#ffffff",
        foregroundImageSrc: "",
        foregroundImagePadding: 2,
      },
      platforms: [],
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getDetail();
    this.onViewDrama();
  },
  watch: {
    mountType: {
      handler(val) {
        if (val == 21) {
          this.ksOptions.foregroundImageSrc =
            "//dj.file.mapvideo.cn/playlet_prod_bannerImg/2024-06-03/dyYa8X6.png";
        } else {
          this.ksOptions.foregroundImageSrc = "";
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    showQrcode() {
      return (
        this.typeIndex != 2 && (this.mountType == 21 || this.mountType == 23)
      );
    },
  },
  methods: {
    async checkAuth() {
      const { data } = await getAuth();
      console.log(data);
      if (!data) {
        this.showModal = true;
      } else {
        this.showPopup = true;
      }
    },
    toAuth() {
      this.showModal = false;
      uni.navigateTo({
        url: "/pages/mine/setting/authen",
      });
    },
    openKs(src) {
      console.log("打开快手");
      let url = "kwai://miniapp?appId=ks655836698639129157&path=";
      let path = src || this.info.ksPromotionUrl;
      path = encodeURIComponent(path);
      url = url + path;
      console.log('url:',url)
      plus.runtime.openURL(url, function (error) {
        this.$u.toast("打开抖音失败");
        alert("sss");
      });
    },
    createTask() {
      // 快手 麦芽短剧 appid ks655836698639129157
      /**
       * douyin:'snssdk1128://',
       * kuaishou:'kwai://work/'
       * */

      if (!this.taskName) return this.$u.toast("请输入任务名称");
      createTask({
        vid: this.id,
        channelType: this.typeIndex, //推广渠道;0抖音1快手2微信
        mountType: this.mountType, //挂载类型;20抖音-小程序推广计划 21星图挂载  22快手挂载 23聚星挂载 24视频号挂载
        taskName: this.taskName,
      }).then((res) => {
        this.$u.toast("操作成功");
        console.log("res:", res);
        this.showPopup = false;
        this.openKs(res.data.promotionUrl);
      });
    },
    createQrcode() {
      if (!this.taskName) return this.$u.toast("请输入任务名称");
      let base =
        "https://myapi.mapvideo.cn/api/v2/operate/redirect/page/wx1de10e2e9e1d4225?page=";
      createTask({
        vid: this.id,
        channelType: this.typeIndex, //推广渠道;0抖音1快手2微信
        mountType: this.mountType, //挂载类型;20抖音-小程序推广计划 21星图挂载  22快手挂载 23聚星挂载 24视频号挂载
        taskName: this.taskName,
      }).then((res) => {
        let path = encodeURIComponent(res.data.promotionUrl);
        this.wxPoster = base + path;
        console.log("====", this.wxPoster);
      });
    },
    onViewDrama() {
      viewDrama({ vid: this.id });
    },

    back() {
      uni.navigateBack();
    },
    selectType(type) {
      this.typeIndex = type;
      if (type == 0) this.mountType = 21;
      if (type == 1){
        if(this.info.ksPromotionUrl){
          this.mountType = 22;
        }else{
          this.mountType = 23;
        }
      }
      if (type == 2) this.mountType = 24;
      for (let i = 0; i < this.platforms.length; i++) {
        if (type == this.platforms[i].id) {
          this.taskName = this.platforms[i].taskName;
          return;
        }
      }
    },
    onCollect() {
      if (this.info.isCollect) {
        return unCollect({ vid: this.id }).then((res) => {
          this.info.isCollect = false;
          this.info.collectCount--;
          this.$u.toast("已取消");
        });
      }
      collect({ vid: this.id }).then((res) => {
        this.info.isCollect = true;
        this.info.collectCount
          ? this.info.collectCount++
          : (this.info.collectCount = 1);
        this.$u.toast("收藏成功");
      });
    },
    toPlay() {
      this.openKs(this.info.playUrl);
    },
    onSaveQrcode(ref) {
      this.$refs[ref].save({
        success: (res) => {
          console.log("保存", res);
          this.$u.toast("成功保存到相册");
        },
      });
    },

    getDetail() {
      this.platforms = [];
      getDramaDetail({ vid: this.id }).then((res) => {
        this.info = res.data;
        this.options.backgroundImageSrc = this.info.verticpic;
        if (this.info.dyPromotionStatus && this.info.dyXtTaskUrl) {
          this.platforms.push({
            name: "抖音",
            id: 0,
            icon: "dy",
            mountType: 21, //拍摄挂载 20
            taskName: this.info.vname + "-抖音-" + this.info.promotionCount,
          });
        }
        if (this.info.ksPromotionStatus) {
          this.platforms.push({
            name: "快手",
            id: 1,
            icon: "kuaishou",
            mountType: 22,
            taskName: this.info.vname + "-快手-" + this.info.promotionCount,
          });
        }
        if (this.info.wxPromotionStatus) {
          this.platforms.push({
            name: "微信",
            id: 2,
            icon: "wx",
            mountType: 24,
            taskName: this.info.vname + "-微信-" + this.info.promotionCount,
          });
        }
        if (!this.platforms.length) return;
        this.typeIndex = this.platforms[0].id;
        this.taskName = this.platforms[0].taskName;
        this.mountType = this.platforms[0].mountType;
        // this.info.netDiskUrl = 'https://pan.baidu.com/s/1bznP5xiO8uXOcQJD_WnvPQ'
        // this.info.netDiskPassword = 'men7'
      });
      getRate().then((res) => {
        console.log(res);
        this.rateInfo = res.data;
      });
    },
    copyCode(text) {
      copyText(text);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common");
._item {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-top: 24rpx;
}
.head {
  position: relative;
  width: 100%;
  padding-bottom: 16rpx;
  .back {
    position: absolute;
    left: 32rpx;
  }
}
.content {
  padding: 0 32rpx 180rpx 32rpx;
  .info {
    padding: 24rpx;
    background: #fff;
    border-radius: 16rpx;
    .poster {
      flex-shrink: 0;
      width: 240rpx;
      height: 320rpx;
      border-radius: 8rpx;
    }
    .right {
      flex: 1;
      padding-left: 24rpx;
      .title {
        width: 100%;
      }
      .eso {
        margin-top: 8rpx;
      }
      .income {
        margin-top: 20rpx;
        .value {
          color: #f65900;
          padding-left: 16rpx;
        }
      }
      .btns {
        padding-right: 20rpx;
        margin-top: 16rpx;
        .btn {
          flex: 1;
          background: #fef3e6;
          color: #f28403;
          padding: 8rpx 0;
          border-radius: 8rpx;
          &:nth-child(1) {
            margin-right: 24rpx;
            color: #436af3;
            background: #edf1fe;
          }
        }
      }
    }
  }
  .types {
    ._item();
    .selection {
      height: 90rpx;
      border-radius: 16rpx;
      overflow: hidden;
      background: rgba(67, 106, 243, 0.1);
      text {
        font-size: 32rpx;
        font-weight: bold;
      }
      .type {
        flex: 1;
        height: 100%;
        &.active {
          background: linear-gradient(91deg, #5f82ff 0%, #436af3 100%);
          border-radius: 16rpx;
          text {
            color: #fff;
          }
        }
      }
      image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 16rpx;
      }
    }
    .desc {
      margin-top: 24rpx;
      .title {
        margin-bottom: 24rpx;
      }
      .desc-t {
        .item {
          width: 262rpx;
          height: 64rpx;
          background: #f5f9ff;
          border-radius: 8rpx;
          margin-right: 32rpx;
          font-size: 24rpx;
          color: rgba(7, 11, 28, 0.9);
          .num {
            color: #436af3;
            font-size: 28rpx;
            margin-left: 16rpx;
          }
        }
      }
    }
  }
  .intro {
    ._item();
  }
  .link {
    ._item();
    .btn {
      width: 176rpx;
      height: 64rpx;
      line-height: 62rpx;
      background: #f5f9ff;
      color: #436af3;
      border-radius: 8rpx;
      text-align: center;
      font-size: 28rpx;
      margin-right: 32rpx;
      margin-top: 24rpx;
      text-decoration: none;
      &:nth-child(2) {
        background: linear-gradient(91deg, #5f82ff 0%, #436af3 100%);
        color: #fff;
      }
    }
  }
  .func {
    position: fixed;
    bottom: 0;
    padding: 32rpx 48rpx;
    background: #fff;
    width: 100%;
    left: 0;
    border-top: 2rpx solid #e9e9ea;
    text {
      font-size: 32rpx;
      color: rgba(7, 11, 28, 0.8);
      // margin-left: 18rpx;
    }
    .btn {
      width: 288rpx;
      height: 88rpx;
      border-radius: 16rpx;
      color: #fff;
      background: linear-gradient(91deg, #5f82ff 0%, #436af3 100%);
      text {
        color: #ffffff;
      }
    }
  }
}

.f-content {
  padding: 48rpx;
  > .title {
    position: relative;
    width: 100%;
    font-weight: bold;
    justify-content: center;
    .close {
      position: absolute;
      right: 0;
      width: 48rpx;
      height: 48rpx;
    }
  }
  .platform {
    margin: 48rpx 0 32rpx 0;
    .tip {
      background: #f5f7fe;
      border-radius: 8rpx;
      color: #436af3;
      font-size: 20rpx;
      padding: 8rpx 24rpx;
      margin-left: 24rpx;
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
    .ps {
      margin-top: 32rpx;
      .ps-item {
        flex: 1;
        display: flex;
        align-items: center;
        background: #f5f7fe;
        border-radius: 8rpx;
        margin-right: 32rpx;
        padding: 20rpx 0;
        justify-content: center;
        position: relative;
        box-sizing: border-box;
        &:nth-last-child(1) {
          margin-right: 0;
        }
        &.active {
          border: 1px solid #436af3;
        }
        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }
        .check {
          background: #436af3;
          width: 24rpx;
          height: 24rpx;
          position: absolute;
          right: 0;
          bottom: 0;
          margin: 0;
          border-radius: 8rpx 0 8rpx 0;
        }
      }
    }
  }
  .task-info {
    .type {
      box-sizing: border-box;
      color: rgba(7, 11, 28, 0.6);
      font-size: 24rpx;
      line-height: 36rpx;
      padding: 12rpx 24rpx;
      border-radius: 8rpx;
      background: #f5f7fe;
      margin-right: 32rpx;
      margin-bottom: 34rpx;
      display: inline-block;
      &.active {
        border: 1px solid #436af3;
        color: #436af3;
      }
    }
    .rq {
      color: #f65900;
    }
    .task-name {
      margin: 32rpx 0;
      .input {
        height: 72rpx;
        background: #f5f7fe;
        border-radius: 8rpx;
        padding: 0 32rpx;
        margin-top: 24rpx;
      }
    }
    .wx-box {
      width: 320rpx;
      height: 320rpx;
      background: #f5f7fe;
      border-radius: 24rpx;
      overflow: hidden;
      .qrcode {
        width: 224rpx;
        height: 224rpx;
      }
    }
    .ks-qrcode {
      position: relative;
      left: 50% !important;
      transform: translateX(-50%);
    }
    .ks-save {
      color: #436af3;
      font-size: 24rpx;
      text-align: center;
      margin-bottom: 16rpx;
      position: relative;
      z-index: 666;
    }
    .create {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 24rpx 0 50rpx 0;
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 6rpx;
      }
      text {
        font-size: 24rpx;
        color: #436af3;
        line-height: 36rpx;
      }
    }
  }
  .btns {
    border-top: 1px solid #e9e9ea;
    width: 100vw;
    margin-left: -48rpx;
    padding: 24rpx 48rpx 0 48rpx;
    .btn {
      height: 44px;
    }
  }
}
</style>
